import React, { useEffect, useContext } from 'react';
import { Table, Button, Switch, Row, Divider , Space, Tag, Select} from 'antd';
import {
  PlusOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  MinusCircleOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';

import Store from './store';
import NewModal from './newModal';

import './style.less';

// groovy脚本管理
const JarConfig = () => {
  const pageStore = useContext(Store);

  // 组件加载获取数据
  useEffect(() => {
    pageStore.qryTableDate();
  }, []);

  const columns = [
    {
      title: '项目名称',
      dataIndex: 'projectName',
      ellipsis: true,
    },
    {
      title: 'jar包地址',
      dataIndex: 'projectPath',
      ellipsis: true,
    },
    {
      title: '版本号',
      dataIndex: 'version',
      width: 185,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 160,
      render: (text, record) => (
        <Row type="flex" align="middle" className="operation">
          <Button
            type="link"
            disabled={record.online}
            onClick={() => pageStore.openModal({ type: 'edit', no: record.no })}
          >
            编辑
          </Button>
          <Divider type="vertical" />
          <Button
            type="link"
            disabled={record.online}
            onClick={() => pageStore.delOne(record.no)}
            loading={pageStore.recordLoding}
          >
            删除
          </Button>
        </Row>
      ),
    },
  ];

  return (
    <div className="page_groovy_set page-content">
      <Button type="primary" icon={<PlusOutlined />} onClick={() => pageStore.openModal({ type: 'new' })}>
        新建
      </Button>

      <Divider dashed />
      <Tag icon={<CheckCircleOutlined />} color="success">
        接口监控列表
      </Tag>

      <Row style={{ marginTop: 20, backgroundColor: '#fff' }}>
        <Table
          loading={pageStore.loading}
          columns={columns}
          dataSource={toJS(pageStore.tableData)}
          pagination={toJS(pageStore.pagination)}
          rowKey="no"
          scroll={{ y: 450 }}
        />
      </Row>
      <NewModal />
    </div>
  );
};
export default observer(JarConfig);
